import { useState } from 'react';

// 定义函数组件
export const App = () => {
  console.log('外部数据变化了');
  // 关联一个外部数据
  const [count, setCount] = useState(0);
  // string
  const [msg, setMsg] = useState('Hello');
  // 数组
  const [books, setBooks] = useState(['React', 'Vue']);
  // 对象类型
  const [obj, setObj] = useState({ name: 'Rose', age: 18 });
  // JSX
  const [jsx, setJsx] = useState(<div>我是useState引入标签</div>);

  // 事件处理函数
  const handleClick = () => {
    setCount(count + 1);
  };
  // 事件处理函数
  const handleClick2 = () => {
    // 修改对象
    // const newObj = { ...obj, name: 'xxxx' };
    // setObj(newObj);
    // console.log(newObj);
    // 数组也一样
    // const newBooks = ['xxxx', ...books];
    // setBooks(newBooks);
    // console.log(newBooks);

    // 修改页面状态
    setCount(count + 2);
    // 一个奇怪的现象，如果修改的数据中有一次可以触发有效更新，比如上面的 setCount。
    // 那么下面这种不创建新对象，修改对象属性值的方式也会更新到页面上。
    // 如果把上面的 setCount 注释掉下面的数据修改就不会更新到页面上。
    obj.age = 28;
    setObj(obj);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={handleClick}>+1</button>
      <h2>{msg}</h2>
      <button onClick={() => setMsg(msg + Math.random())}>改变msg</button>
      {books.map((item, i) => (
        <li key={i}>{item}</li>
      ))}
      <button
        onClick={() =>
          // setBooks([Math.random().toString(36).substring(2, 5), ...books])
          setBooks([
            String.fromCharCode(65 + Math.floor(Math.random() * 48)) +
              String.fromCharCode(65 + Math.floor(Math.random() * 48)) +
              String.fromCharCode(65 + Math.floor(Math.random() * 48)),
            ...books,
          ])
        }
      >
        改变数组
      </button>
      <h2>
        {obj.name},{obj.age}
      </h2>
      <button
        onClick={() =>
          setObj({
            ...obj,
            name:
              obj.name +
              String.fromCharCode(65 + Math.floor(Math.random() * 24)),
            age: obj.age + Math.floor(Math.random() * 5),
          })
        }
      >
        修改对象1
      </button>
      <button onClick={handleClick2}>修改对象2</button>
      {jsx}
      <button
        onClick={() =>
          setJsx(<div>我是修改后的jsx{Math.floor(Math.random() * 10)}</div>)
        }
      >
        修改标签
      </button>
    </div>
  );
};
